<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 1200px;
        height: 360px;
        background-color: aqua;
    }

    .box1 {
        height: 50px;
        background-color: pink;
    }

    h3 {
        padding: 15px;
        padding-top: 5px;
        color: #cc5252;
        float: left;
    }

    .timer {
        width: 270px;
        height: 25px;
        border-radius: 10px;
        background-color: #cc5252;
        float: left;
        margin: 10px;
        line-height: 25px;
        color: #fff;
        font-size: 12px;
        text-indent: 12px;

    }

    a {
        text-decoration: none;
        color: #7d678c;
        font-size: 14px;
        float: right;
        margin: 10px;
    }

    .box2 {
        width: 1200px;


        height: 310px;

    }

    .banner {
        float: left;
        margin-left: 15px;
        margin-right: 10px;
    }

    .banner img {
        width: 400px;
        height: 290px;
    }

    .imgBox {
        width: 600px;
        height: 290px;
        overflow: hidden;
        float: left;
        position: relative;
    }

    .boximg {
        width: 600px;
        height: 290px;
        background-color: #fff;
        position: absolute;


    }

    .boximg dl {
        float: left;
        width: 33%;
        margin-top: 20px;


    }

    .boximg dl {

        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .jinatou {
        cursor: pointer;
        color: #fff;
        font-size: 24px;
        position: absolute;
        line-height: 70px;
        text-align: center;
        left: 0;
        top: 50%;
        width: 40px;
        height: 70px;
        border-radius: 0 10px 10px 0;
        background-color: #d9d9d9
    }

    .jiantou1 {
        color: #fff;
        font-size: 24px;
        position: absolute;
        line-height: 70px;
        text-align: center;
        right: 0;
        cursor: pointer;
        top: 50%;
        width: 40px;
        height: 70px;
        border-radius: 10px 0 0 10px;
        background-color: #d9d9d9
    }

    .txtbox {
        margin: 2px 0;
        width: 100px;
        height: 26px;
        line-height: 26px;
        background-color: #cc5252;
        color: #fff;
        font-size: 14px;
        border-radius: 15px;
    }

    dd:nth-child(4) {
        font-size: 14px;
        text-decoration: line-through;
        color: #999999;
    }

    .box3 {
        width: 160px;
        height: 290px;
        float: left;
        margin-left: 10px;
        background-color: pink;
        position: relative;
        overflow: hidden;
    }

    .box3 .jinatou3 {
        cursor: pointer;
        color: #ccc;
        font-size: 24px;
        position: absolute;
        top: 10px;
        left: -8px;
        top: 50%;


    }

    .box3 .jiantou4 {
        color: #ccc;
        font-size: 24px;
        position: absolute;

        top: 10px;
        right: -3px;
        cursor: pointer;
        top: 50%;



    }

    .txtbox1 {

        width: 155px;
        height: 290px;

        margin-left: 5px;
        position: absolute;

    }

    .txtbox1 img {
        display: block;
        padding: 10px;
        width: 130px;
        height: 250px;
        padding-bottom: 0;
    }

    .txtbox1 ul {
        padding-left: 60px;
        padding-top: 10px;
    }

    ul li {
        list-style: none;
        float: left;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: #999999;
        margin-left: 5px;

    }

    ul .slected {

        background-color: #cc5252 !important;

    }
</style>

<body>
    <div class="box">
        <div class="box1">
            <h3>限时秒杀</h3>
            <div class="timer">
                &nbsp;&nbsp; 距离本次活动:
            </div>
            <a href="">查看更多>></a>
        </div>
        <div class="box2">
            <div class="banner"><img src="images/Snipaste_2021-10-04_16-59-59.jpg" alt=""></div>
            <div class="imgBox">
                <div class="boximg">
                    <dl>
                        <dt> <img src="images/02.jpg" alt=""></dt>
                        <dd>浪琴</dd>
                        <dd class="txtbox">8.4折 $10,000</dd>
                        <dd>$13,000</dd>

                    </dl>
                    <dl>
                        <dt> <img src="images/02.jpg" alt=""></dt>
                        <dd>浪琴</dd>
                        <dd class="txtbox">8.4折 $10,000</dd>
                        <dd>$13,000</dd>
                    </dl>
                    <dl>
                        <dt> <img src="images/02.jpg" alt=""></dt>
                        <dd>浪琴</dd>
                        <dd class="txtbox">8.4折 $10,000</dd>
                        <dd>$13,000</dd>
                    </dl>



                    <dl>
                        <dt> <img src="images/02.jpg" alt=""></dt>
                        <dd>浪琴1</dd>
                        <dd class="txtbox">8.4折 $10,000</dd>
                        <dd>$13,000</dd>

                    </dl>
                    <dl>
                        <dt> <img src="images/02.jpg" alt=""></dt>
                        <dd>浪琴1</dd>
                        <dd class="txtbox">8.4折 $10,000</dd>
                        <dd>$13,000</dd>
                    </dl>
                    <dl>
                        <dt> <img src="images/02.jpg" alt=""></dt>
                        <dd>浪琴1</dd>
                        <dd class="txtbox">8.4折 $10,000</dd>
                        <dd>$13,000</dd>
                    </dl>

                </div>


                <span class="jinatou">&lt;</span>



                <span class="jiantou1">&gt;</span>

            </div>

            <div class="box3">
                <div class="txtbox1 ">
                    <img src="images/30.jpg" alt="">
                    <ul>
                        <li class="slected"></li>
                        <li></li>
                    </ul>
                    <span class="jinatou3">&lt;</span>

                    <img src="images/30.jpg" alt="">
                    <ul>
                        <li class="slected"></li>
                        <li></li>
                    </ul>
                    <span class="jinatou3">&lt;</span>



                </div>
                <span class="jiantou4">&gt;</span>



            </div>

        </div>

    </div>
</body>
<script src="./js/animate.js"></script>
<script src="./js/animate1.js"></script>
<script>
    var oTimer = document.querySelector(".timer")
    //结束日期
    var end = new Date(2021, 10, 4);
    setInterval(function () {
        //动态的当前日期
        var curent = Date.now();
        var num = end - curent; //毫秒数
        var ms = num % 1000;// 毫秒
        var ss = parseInt(num / 1000) % 60;//秒
        var mm = parseInt(num / 1000 / 60) % 60;//分
        var hh = parseInt(num / 1000 / 60 / 60) % 24;//时
        var dd = parseInt(num / 1000 / 60 / 60 / 24);//时

        var str = ` 距离本次活动:${dd}天${hh}时${mm}分${ss}秒${ms}毫秒`;
        oTimer.innerHTML = str.fontcolor("#fff");



    })



    //1.给每一个span绑定点击事件,
    //在点击事件里 获取对应的下标

    var oBoximg = document.querySelector(".boximg");
    var oSpan = document.querySelectorAll("span");

    setInterval(function () {
        for (var i = 0; i < oSpan.length; i++) {
            oSpan[i].index = i;
            oSpan[i].onclick = function () {
                animate(oBoximg, "top", this.index * -290);
                //排他思想

            }
        }

    }, 0)
    /*  var oBox = document.getElementById('box');

     var oUl = document.getElementById('ul');

     var oOl = document.getElementById('ol');


     var imgIndex = 0;

     function autoPlay() {

         imgIndex++;
         if (imgIndex > 4) {
             imgIndex = 0;
         }

         for (var i = 0; i < oUl.children.length; i++) {
             if (i == imgIndex) {
                 utils.animate(oUl.children[i], { "opacity": 1 });

                 utils.animate(oOl.children[i], { "opacity": 1 })
             } else {
                 utils.animate(oUl.children[i], { "opacity": 0 });
                 utils.animate(oOl.children[i], { "opacity": 0.2 })
             }
         }
     }

     var timer = setInterval(function () {
         autoPlay()
     }, 1500)


     for (var i = 0; i < oOl.children.length; i++) {

         oOl.children[i].index = i;
         oOl.children[i].onclick = function () {
             clearInterval(timer);
             imgIndex = this.index - 1;
             autoPlay();
         }
     }


     oBox.onmouseleave = function () {
         timer = setInterval(function () {
             autoPlay()
         }, 1500)
     }

     oBox.onmouseenter = function () {
         clearInterval(timer);
     }

  */




</script>

</html>